<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>大数据可视化系统数据分析</title>
    <script type="text/javascript" src="__STATIC__/plugs/other/bigdata/js/jquery.js"></script>
    <link rel="stylesheet" href="__STATIC__/plugs/other/bigdata/css/comon0.css">
</head>
<body>
<div class="loading">
    <div class="loadbox"> <img src="__STATIC__/plugs/other/bigdata/images/loading.gif"> 页面加载中... </div>
</div>
<div class="head">
    <h1><a href="https://gitee.com/iGaoWei/big-data-view">大数据可视化系统数据分析</a></h1>
    <div class="time" id="showTime">2022/01/19 16:16:54</div>
    <script>
        var t = null;
        t = setTimeout(time,1000);//開始运行
        function time()
        {
            clearTimeout(t);//清除定时器
            dt = new Date();
            var y=dt.getFullYear();
            var mt=dt.getMonth()+1;
            var day=dt.getDate();
            var h=dt.getHours();//获取时
            var m=dt.getMinutes();//获取分
            var s=dt.getSeconds();//获取秒
            var t = null;
            document.getElementById("showTime").innerHTML = y+"/"+Appendzero(mt)+"/"+Appendzero(day)+" "+Appendzero(h)+":"+Appendzero(m)+":"+Appendzero(s)+"";
            function Appendzero(obj){
                if(obj<10) return "0" +""+ obj;
                else return obj;
            }
            t = setTimeout(time,1000); //设定定时器，循环运行
        }

    </script>

</div>
<div class="mainbox">
    <ul class="clearfix">
        <li>

            <div class="boxall" style="height: calc(58% - .15rem)">
                <div class="alltitle">排行前10</div>
                <div class=" boxnav " id="echarts4">
                </div>
            </div>
            <div class="boxall" style="height: calc(42% - .15rem)">
                <div class="alltitle">标题名称</div>
                <div class="boxnav" id="echarts3"></div>
            </div>
        </li>
        <li>
            <div class="boxall" style="height: calc(20% - .15rem)">
                <ul class="row h100 clearfix">
                    <li class="col-6">
                        <div class="sqzs h100">
                            <p>投票总量</p>
                            <h1><span>{$data.total_vcount}</span>票</h1>
                        </div>
                    </li>
                    <li class="col-6">
                        <ul class="row h100 clearfix">
                            <li class="col-4">
                                <div class="tit01">标题名称</div>
                                <div class="piebox" id="pe01"></div>
                            </li>
                            <li class="col-4">
                                <div class="tit01">标题名称</div>
                                <div class="piebox" id="pe02"></div>
                            </li>
                            <li class="col-4">
                                <div class="tit01">标题名称</div>
                                <div class="piebox" id="pe03"></div>
                            </li>
                        </ul>

                    </li>
                </ul>
            </div>
            <div class="boxall" style="height: calc(38% - .15rem)">
                <div class="alltitle">标题名称</div>
                <div class="boxnav" id="echarts1"></div>
            </div>
            <div class="boxall" style="height: calc(42% - .15rem)">
                <div class="alltitle">标题名称</div>
                <div class="boxnav" id="echarts2"></div>
            </div>

        </li>
        <li>

            <div class="boxall" style="height: calc(33.333% - .15rem)">

                <div class="alltitle">标题名称</div>
                <div class="boxnav" id="echarts5"></div>

            </div>
            <div class="boxall" style="height: calc(33.333% - .15rem)">
                <div class="alltitle">标题名称</div>
                <div class="boxnav" id="">
                    <table border="0" cellspacing="0">
                        <tr>
                            <th></th>
                            <th>字段</th>
                            <th>字段</th>
                            <th>字段</th>
                            <th>字段</th>

                        </tr>
                        <tr>
                            <th>字段</th>
                            <td>8098</td>
                            <td>19.80%</td>
                            <td>22</td>
                            <td>368</td>
                        </tr>
                        <tr>
                            <th>字段</th>
                            <td>7506</td>
                            <td>6.70%</td>
                            <td>22</td>
                            <td>339</td>
                        </tr>
                        <tr>
                            <th>字段</th>
                            <td>3261</td>
                            <td>32.30%</td>
                            <td>10</td>
                            <td>325.7</td>
                        </tr>
                        <tr>
                            <th>字段</th>
                            <td>1993</td>
                            <td>	201%</td>
                            <td>10</td>
                            <td>	199</td>
                        </tr>
                    </table>





                </div>

            </div>
            <div class="boxall" style="height: calc(33.333% - .15rem)">
                <div class="alltitle">标题名称</div>
                <div class="boxnav" id="echarts6" style="height:calc(100% - .3rem);"></div>
            </div>
        </li>
    </ul>
</div>

<script type="text/javascript" src="__STATIC__/plugs/other/bigdata/js/echarts.min.js"></script>
<script language="JavaScript">
    $(window).load(function(){
        $(".loading").fadeOut()
    })

    /****/
    $(document).ready(function(){
        var whei=$(window).width()
        $("html").css({fontSize:whei/20})
        $(window).resize(function(){
            var whei=$(window).width()
            $("html").css({fontSize:whei/20})
        });
    });


    $(window).load(function(){$(".loading").fadeOut()})
    $(function () {
        echarts_1()
        echarts_2()
        echarts_3()
        echarts_4()
        echarts_5()
        echarts_6()
        pe01()
        pe02()
        pe03()

        function echarts_1() {
            var myChart = echarts.init(document.getElementById('echarts1'));

            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {type: 'shadow'},
                },"grid": {
                    "top": "20%",
                    "right":"50",
                    "bottom":"20",
                    "left":"30",
                },
                legend: {
                    data: ['字段1', '字段2', '字段3','字段4','字段5','字段6'],
                    right: 'center', width:'100%',
                    textStyle: {
                        color: "#fff"
                    },
                    itemWidth: 12,
                    itemHeight: 10,
                },



                "xAxis": [
                    {
                        "type": "category",
                        data: ['2016', '2017', '2018', '2019'],
                        axisLine: { lineStyle: {color: "rgba(255,255,255,.1)"}},
                        axisLabel:  { textStyle: {color: "rgba(255,255,255,.7)", fontSize: '14', },
                        },

                    },
                ],
                "yAxis": [
                    {
                        "type": "value",
                        "name": "单位万",
                        axisTick: {show: false},
                        splitLine: {
                            show: false,

                        },
                        "axisLabel": {
                            "show": true,
                            fontSize:14,
                            color: "rgba(255,255,255,.6)"

                        },
                        axisLine: {
                            min:0,
                            max:10,
                            lineStyle: {color: 'rgba(255,255,255,.1)'}
                        },//左线色

                    },
                    {
                        "type": "value",
                        "name": "增速",
                        "show": true,
                        "axisLabel": {
                            "show": true,
                            fontSize:14,
                            formatter: "{value} %",
                            color: "rgba(255,255,255,.6)"
                        },
                        axisTick: {show: false},
                        axisLine: {lineStyle: {color: 'rgba(255,255,255,.1)'}},//右线色
                        splitLine: {show:true,lineStyle: {color:'rgba(255,255,255,.1)'}},//x轴线
                    },
                ],
                "series": [

                    {
                        "name": "字段1",
                        "type": "bar",
                        "data": [36.6,38.80, 40.84, 41.60],
                        "barWidth": "15%",
                        "itemStyle": {
                            "normal": {
                                barBorderRadius: 15,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#8bd46e'
                                }, {
                                    offset: 1,
                                    color: '#09bcb7'
                                }]),
                            }
                        },
                        "barGap": "0.2"
                    },
                    {
                        "name": "字段2",
                        "type": "bar",
                        "data":[14.8,14.1, 15, 16.30],
                        "barWidth": "15%",
                        "itemStyle": {
                            "normal": {
                                barBorderRadius: 15,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#248ff7'
                                }, {
                                    offset: 1,
                                    color: '#6851f1'
                                }]),
                            }
                        },
                        "barGap": "0.2"
                    },
                    {
                        "name": "字段3",
                        "type": "bar",
                        "data":[9.2,9.1, 9.85, 8.9],
                        "barWidth": "15%",
                        "itemStyle": {
                            "normal": {
                                barBorderRadius: 15,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#fccb05'
                                }, {
                                    offset: 1,
                                    color: '#f5804d'
                                }]),
                            }
                        },
                        "barGap": "0.2"
                    },
                    {
                        "name": "字段4",
                        "type": "line",
                        smooth: true,
                        "yAxisIndex": 1,
                        "data": [0,6.01, 5.26, 1.48],
                        lineStyle: {
                            normal: {
                                width: 2
                            },
                        },
                        "itemStyle": {
                            "normal": {
                                "color": "#86d370",

                            }
                        },

                    }
                    ,
                    {
                        "name": "字段5",
                        "type": "line",
                        "yAxisIndex": 1,

                        "data": [0, -4.73, 6.38,8.67],
                        lineStyle: {
                            normal: {
                                width: 2
                            },
                        },
                        "itemStyle": {
                            "normal": {
                                "color": "#3496f8",

                            }
                        },
                        "smooth": true
                    } ,
                    {
                        "name": "字段6",
                        "type": "line",
                        "yAxisIndex": 1,

                        "data":[0,-1.09, 8.24, -9.64],
                        lineStyle: {
                            normal: {
                                width: 2
                            },
                        },
                        "itemStyle": {
                            "normal": {
                                "color": "#fbc30d",

                            }
                        },
                        "smooth": true
                    }
                ]
            };

            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });


        }
        function echarts_2() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echarts2'));

            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {type: 'shadow'},
                    // formatter:'{c}' ,
                },
                grid: {
                    left: '0',
                    top: '30',
                    right: '10',
                    bottom: '-20',
                    containLabel: true
                },
                legend: {
                    data: ['字段1', '字段2'],
                    right: 'center',
                    top:0,
                    textStyle: {
                        color: "#fff"
                    },
                    itemWidth: 12,
                    itemHeight: 10,
                    // itemGap: 35
                },

                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    axisLabel:  {
                        rotate: -90,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize:14,

                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }

                    },

                    data: ['17年3月', '17年6月', '17年9月', '17年12月', '18年3月', '18年6月', '18年9月', '18年12月', '19年3月', '19年6月', '19年9月', '19年12月']

                }, {

                    axisPointer: {show: false},
                    axisLine: {  show: false},
                    position: 'bottom',
                    offset: 20,



                }],

                yAxis: [{
                    type: 'value',
                    axisTick: {show: false},
                    // splitNumber: 6,
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }
                    },
                    axisLabel:  {
                        formatter: "{value} %",
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize:14,
                        },
                    },

                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }
                    }
                }],
                series: [
                    {
                        name: '字段1',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                color: 'rgba(228, 228, 126, 1)',
                                width: 2
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(228, 228, 126, .2)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(228, 228, 126, 0)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: 'rgba(228, 228, 126, 1)',
                                borderColor: 'rgba(228, 228, 126, .1)',
                                borderWidth: 12
                            }
                        },
                        data: [12.50, 14.4, 16.1, 14.9, 20.1, 17.2, 17.0, 13.42, 20.12, 18.94, 17.27, 16.10 ]

                    }, {
                        name: '字段2',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {

                            normal: {
                                color: 'rgba(255, 128, 128, 1)',
                                width: 2
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(255, 128, 128,.2)'
                                }, {
                                    offset:1,
                                    color: 'rgba(255, 128, 128, 0)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: 'rgba(255, 128, 128, 1)',
                                borderColor: 'rgba(255, 128, 128, .1)',
                                borderWidth: 12
                            }
                        },
                        data: [-6.4, 0.1, 6.6, 11.2, 42.1, 26.0, 20.2, 18.31, 21.59, 24.42, 34.03, 32.9]
                    },
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });
        }
        function echarts_3() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echarts3'));

            option = {

                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data: ['字段1', '字段2', '字段3'],
                    right: 'center',
                    top:0,
                    textStyle: {
                        color: "#fff"
                    },
                    itemWidth: 12,
                    itemHeight: 10,
                    // itemGap: 35
                },
                grid: {
                    left: '0',
                    right: '20',
                    bottom: '0',
                    top:'15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['字段1','字段2','字段3','字段4','字段5','字段6','字段7','字段8','字段9','字段10'],
                    axisLine: {
                        lineStyle: {
                            color: 'white'

                        }
                    },
                    axisLabel: {
                        //rotate:-90,
                        formatter:function(value){return value.split("").join("\n");},
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize:14,
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.3)'
                        }
                    },
                },

                yAxis: {
                    type: 'value',
                    splitNumber: 4,
                    axisTick: {show: false},
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(255,255,255,0.1)'
                        }
                    },
                    axisLabel: {textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize:14,
                    }},
                    axisLine: {show:false},
                },

                series: [{
                    name: '字段1',
                    type: 'bar',
                    stack: 'a',
                    barWidth: '30',barGap: 0,
                    itemStyle: {
                        normal: {
                            color: '#8bd46e', }
                    },
                    data: [331, 497, 440, 81, 163, 366, 57, 188, 172, 2295]
                },
                    {
                        name: '字段2',
                        type: 'bar',
                        stack: 'a',
                        barWidth: '30',barGap: 0,
                        itemStyle: {
                            normal: {
                                color: '#f5804d',
                                barBorderRadius:0, }
                        },
                        data: [48, -97, 56, -59, 90, 98, 64, 61, -8, 253]
                    },
                    {
                        name: '字段3',
                        type: 'bar',
                        stack: 'a',
                        barWidth: '30',barGap: 0,
                        itemStyle: {
                            normal: {
                                color: '#248ff7',
                                barBorderRadius:0, }
                        },
                        data: [ -13, -21, -112, 5, 0, -5, 72, -3, 8, -69]
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });
        }
        function echarts_5() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echarts5'));

            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {type: 'shadow'},
                },"grid": {
                    "top": "15%",
                    "right":"10%",
                    "bottom":"20",
                    "left":"10%",
                },
                legend: {
                    data: ['字段1', '字段2'],
                    right: 'center',
                    top:0,
                    textStyle: {
                        color: "#fff"
                    },
                    itemWidth: 12,
                    itemHeight: 10,
                },
                "xAxis": [
                    {
                        "type": "category",

                        data: ['2016', '2017', '2018', '2019'],
                        axisLine: { lineStyle: {color: "rgba(255,255,255,.1)"}},
                        axisLabel:  { textStyle: {color: "rgba(255,255,255,.7)", fontSize: '14', },
                        },

                    },
                ],
                "yAxis": [
                    {
                        "type": "value",
                        "name": "单位1",
                        splitLine: {show: false},
                        axisTick: {show: false},
                        "axisLabel": {
                            "show": true,
                            color: "rgba(255,255,255,.6)"

                        },
                        axisLine: {lineStyle: {color: 'rgba(255,255,255,.1)'}},//左线色

                    },
                    {
                        "type": "value",
                        "name": "单位2",
                        "show": true,
                        axisTick: {show: false},
                        "axisLabel": {
                            "show": true,
                            formatter: "{value} %",
                            color: "rgba(255,255,255,.6)"
                        },
                        axisLine: {lineStyle: {color: 'rgba(255,255,255,.1)'}},//右线色
                        splitLine: {show:true,lineStyle: {color:'rgba(255,255,255,.1)'}},//x轴线
                    },
                ],
                "series": [

                    {
                        "name": "字段1",
                        "type": "bar",
                        "data": [
                            18453.35 ,20572.22 ,24274.22 ,30500.00
                        ],
                        "barWidth": "20%",

                        "itemStyle": {
                            "normal": {
                                barBorderRadius: 15,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#fccb05'
                                }, {
                                    offset: 1,
                                    color: '#f5804d'
                                }]),
                            }
                        },
                        "barGap": "0"
                    },
                    {
                        "name": "字段2",
                        "type": "line",
                        "yAxisIndex": 1,

                        "data": [0,11.48,18.00,25.65],
                        lineStyle: {
                            normal: {
                                width: 2
                            },
                        },
                        "itemStyle": {
                            "normal": {
                                "color": "#ff3300",

                            }
                        },
                        "smooth": true
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });
        }
        function echarts_4() {

            var top10_name={$top10_name|raw};//后台返回的json串格式
            var top10_vcount={$top10_vcount|raw};//后台返回的json串格式
//            console.log(top10_name);

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echarts4'));
            var myColor=['#eb2100','#eb3600','#d0570e','#d0a00e','#34da62','#00e9db','#00c0e9','#0096f3'];
            option = {

                grid: {
                    left: '2%',
                    top:'1%',
                    right: '5%',
                    bottom: '0%',
                    containLabel: true
                },
                xAxis: [{
                    show: false,
                }],
                yAxis: [{
                    axisTick:'none',
                    axisLine:'none',
                    offset:'7',
                    axisLabel: {
                        textStyle: {
                            color: 'rgba(255,255,255,.6)',
                            fontSize:'14',
                        }
                    },
//                    data: ['字段1','字段2','字段3','字段4','字段5','字段6','字段7','字段8','字段9','字段10']
                    data: {$top10_name|raw}

                }, {
                    axisTick:'none',
                    axisLine:'none',
                    axisLabel: {
                        textStyle: {
                            color: 'rgba(255,255,255,.6)',
                            fontSize:'14',
                        }
                    },
                    data: top10_vcount

                },{
                    name:'单位：件',
                    nameGap:'50',
                    nameTextStyle:{
                        color: 'rgba(255,255,255,.6)',
                        fontSize:'16',
                    },
                    axisLine:{
                        lineStyle:{
                            color:'rgba(0,0,0,0)'
                        }
                    },
                    data: [],
                }],
                series: [{
                    name: '条',
                    type: 'bar',
                    yAxisIndex: 0,
                    data: [10,25,30,34,40,43,48,52,56,70],
                    label:{
                        normal:{
                            show:true,
                            position:'right',
                            formatter:function(param){
                                return param.value + '%';
                            },
                            textStyle:{
                                color: 'rgba(255,255,255,.8)',
                                fontSize:'12',
                            }
                        }
                    },
                    barWidth: 15,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                offset: 0,
                                color: '#03c893'
                            },
                                {
                                    offset: 1,
                                    color: '#0091ff'
                                }
                            ]),
                            barBorderRadius: 15,
                        }
                    },
                    z: 2
                }, {
                    name: '白框',
                    type: 'bar',
                    yAxisIndex: 1,
                    barGap: '-100%',
                    data: [99.5,99.5,99.5,99.5,99.5,99.5,99.5,99.5,99.5,99.5],
                    barWidth: 15,
                    itemStyle: {
                        normal: {
                            color:'rgba(0,0,0,.2)',
                            barBorderRadius:15,
                        }
                    },
                    z: 1
                }]
            };


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });
        }
        function echarts_6() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echarts6'));


            option = {
                title:{
                    text:'5132',
                    subtext:'总体',
                    x:'center',
                    y:'40%',
                    textStyle:{
                        color:'#fff',
                        fontSize:22,
                        lineHeight:10,
                    },
                    subtextStyle: {
                        color:'#90979c',
                        fontSize:16,
                        lineHeight:10,

                    },
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{b} : {c} ({d}%)"
                },

                visualMap: {
                    show: false,
                    min: 500,
                    max: 600,
                    inRange: {
                        //colorLightness: [0, 1]
                    }
                },
                series: [{
                    name: '访问来源',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    center: ['50%', '50%'],
                    color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'], //'#FBFE27','rgb(11,228,96)','#FE5050'
                    data: [{
                        "value": 1924,
                        "name": "字段名称1"
                    }, {
                        "value": 1055,
                        "name": "字段名称2"
                    }, {
                        "value": 1532,
                        "name": "字段名称3"}
                    ].sort(function(a, b) {
                        return a.value - b.value
                    }),
                    roseType: 'radius',

                    label: {
                        normal: {
                            formatter: ['{c|{c}万}', '{b|{b}}'].join('\n'),
                            rich: {
                                c: {
                                    color: 'rgb(241,246,104)',
                                    fontSize: 20,
                                    fontWeight:'bold',
                                    lineHeight: 5
                                },
                                b: {
                                    color: 'rgb(98,137,169)',
                                    fontSize: 14,
                                    height: 44
                                },
                            },
                        }
                    },
                    labelLine: {
                        normal: {
                            lineStyle: {
                                color: 'rgb(98,137,169)',
                            },
                            smooth: 0.2,
                            length: 10,
                            length2: 20,

                        }
                    }
                }]
            };


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });
        }


        function pe01() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('pe01'));
            var txt=81
            option = {
                title: {
                    text: txt+'%',
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        fontWeight: 'normal',
                        color: '#fff',
                        fontSize: '18'
                    }
                },
                color:'rgba(255,255,255,.3)',

                series: [{
                    name: 'Line 1',
                    type: 'pie',
                    clockWise: true,
                    radius: ['65%', '80%'],
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        }
                    },
                    hoverAnimation: false,
                    data: [{
                        value: txt,
                        name: '已使用',
                        itemStyle: {
                            normal: {
                                color:'#eaff00',
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            }
                        }
                    }, {
                        name: '未使用',
                        value: 100-txt
                    }]
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });
        }

        function pe02() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('pe02'));
            var txt=17
            option = {
                title: {
                    text: txt+'%',
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        fontWeight: 'normal',
                        color: '#fff',
                        fontSize: '18'
                    }
                },
                color:'rgba(255,255,255,.3)',

                series: [{
                    name: 'Line 1',
                    type: 'pie',
                    clockWise: true,
                    radius: ['65%', '80%'],
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        }
                    },
                    hoverAnimation: false,
                    data: [{
                        value: txt,
                        name: '已使用',
                        itemStyle: {
                            normal: {
                                color:'#ea4d4d',
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            }
                        }
                    }, {
                        name: '未使用',
                        value: 100-txt
                    }]
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });
        }
        function pe03() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('pe03'));
            var txt=2
            option = {
                title: {
                    text: txt+'%',
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        fontWeight: 'normal',
                        color: '#fff',
                        fontSize: '18'
                    }
                },
                color:'rgba(255,255,255,.3)',

                series: [{
                    name: 'Line 1',
                    type: 'pie',
                    clockWise: true,
                    radius: ['65%', '80%'],
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        }
                    },
                    hoverAnimation: false,
                    data: [{
                        value: txt,
                        name: '已使用',
                        itemStyle: {
                            normal: {
                                color:'#395ee6',
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            }
                        }
                    }, {
                        name: '未使用',
                        value: 100-txt
                    }
                    ]
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });
        }
    })

</script>
</body>
</html>
